
<style>
    .layui-footer {
        background: #2f363c;
        color: #8c8c8c;
        padding: 3rem 0 2rem;
        margin-top: 2rem;
    }

    /* 左侧 Logo 区域 */
    .footer-logo-section {
        padding: 0 2rem;
    }

    .footer-logo {
        max-height: 60px;
        margin-bottom: 1rem;
        transition: opacity 0.3s ease;
    }

    .footer-logo:hover {
        opacity: 0.8;
    }

    .footer-description {
        color: #8c8c8c;
        line-height: 1.6;
        font-size: 0.9rem;
        margin-top: 1rem;
    }

    /* 中间链接区域 */
    .footer-links-section {
        padding: 0 2rem;
    }

    .footer-nav {
        margin-bottom: 1.5rem;
    }

    .footer-nav a {
        color: #8c8c8c;
        margin-right: 1.5rem;
        transition: color 0.3s ease;
        font-size: 0.9rem;
    }

    .footer-nav a:hover {
        color: #fff;
        text-decoration: none;
    }

    .footer-copyright {
        color: #8c8c8c;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .footer-copyright a {
        color: #8c8c8c;
        transition: color 0.3s ease;
    }

    .footer-copyright a:hover {
        color: #fff;
        text-decoration: none;
    }

    /* 社交媒体图标 */
    .footer-social {
        margin-top: 1.5rem;
    }

    .social-icons {
        display: flex;
        gap: 1rem;
    }

    .social-icons a {
        color: #8c8c8c;
        font-size: 1.5rem;
        transition: all 0.3s ease;
    }

    .social-icons a:hover {
        color: #fff;
        transform: translateY(-3px);
    }

    /* 右侧二维码区域样式优化 */
    .footer-qr-section {
        padding: 0 2rem;
        text-align: right;
        display: flex;  /* 使用flex布局 */
        align-items: center;  /* 垂直居中对齐 */
        gap: 1rem;  /* 设置间距 */
    }

    .qr-wrapper {
        text-align: center;  /* 文字居中 */
    }

    .footer-qr-code {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        transition: transform 0.3s ease;
    }

    .footer-qr-code:hover {
        transform: scale(1.05);
    }

    .footer-qr-text {
        color: #8c8c8c;
        font-size: 0.9rem;
        margin-top: 0.5rem;  /* 调整与二维码的间距 */
    }

    /* 响应式设计 */
    @media screen and (max-width: 768px) {
        .layui-footer {
            padding: 2rem 1rem;
        }

        .footer-logo-section,
        .footer-links-section,
        .footer-qr-section {
            padding: 1rem;
            text-align: center;
        }

        .social-icons {
            justify-content: center;
        }

        .footer-nav a {
            display: inline-block;
            margin: 0.5rem;
        }

        .footer-qr-section {
            justify-content: center;  /* 移动端居中显示 */
            padding: 1rem;
        }
    }
</style>

<!-- 引入必要的脚本 -->
<script src="{{ url_for('static', filename='system/component/layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='system/component/pear/pear.js') }}"></script>

<!-- Footer 内容 -->
<div class="layui-footer layui-row">
    <!-- 左侧 Logo 区域 -->
    <div class="layui-col-md3 footer-logo-section">
        <img class="footer-logo" id="logo_src" src="{{ url_for('static', filename='upload/bg2.png')}}" alt="Logo">
        <div class="footer-description" id="logo_remark">
            致力于分享实用的教程，积累和传播知识。
        </div>
    </div>

    <!-- 中间链接区域 -->
    <div class="layui-col-md7 footer-links-section">
        <!-- 导航链接 -->
        <div class="footer-nav" id="aboutlinks">
            <a href="#">关于本站</a>
            <a href="#">友情链接</a>
            <a href="#">本站地图</a>
            <a href="#">本站声明</a>
        </div>

        <!-- 版权信息 -->
        <div class="footer-copyright">
            <p>© <span id="yearday"></span> 
                <a id="Domain_Address" href="" target="_blank">
                    <span id='Domain_Name'>laoknas网络技术</span>
                </a> 
                All rights reserved.
            </p>
            <p>
                <a href="http://beian.miit.gov.cn/" id="ICP_beian" target="_blank">
                    辽ICP备202100XXX号
                </a>
            </p>
        </div>

        <!-- 社交媒体图标 -->
        <div class="footer-social">
            <div class="social-icons">
                <a class="service-qq" title="QQ联系" target="_blank" 
                   href="https://wpa.qq.com/msgrd?v=3&amp;uin=806666754&amp;site=qq&amp;menu=yes">
                    <i class="layui-icon layui-icon-login-qq"></i>
                </a>
                <a href="#" title="微信">
                    <i class="layui-icon layui-icon-login-wechat"></i>
                </a>
                <a href="#" title="邮箱">
                    <i class="layui-icon layui-icon-email"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- 右侧二维码区域 HTML -->
    <div class="layui-col-md2 footer-qr-section">
        <div class="qr-wrapper">
            <img class="footer-qr-code" id="QR_code_src" 
                src="{{ url_for('static', filename='upload/qrcode.jpg')}}" 
                alt="QR Code">
            <div class="footer-qr-text" id="QR_code_Name">QQ群</div>
        </div>
    </div>
</div>
<script>
    // 网站信息
    layui.use([ 'jquery', 'layer'], function () {
    let $ = layui.jquery;
    let layer = layui.layer;
    let MODULE_PATH = '/';
    $.ajax({
        url: MODULE_PATH + 'website',
        contentType: 'application/json',
        type: 'get',
        success: function (result) {
        if (result.code === 200) {
            // console.log(result.data); // 打印查询结果
            // 在 result.data 数组中找到 key_name 为 "sitename" 的对象，并获取其 value_name
            let sitenameObj = result.data.find(item => item.key_name === 'Site_Name');
                if (sitenameObj) {
                	let sitename = sitenameObj.value_name + " - {{ navtitle }}"
                    $('#website_title').text(sitename); // 更新页面的 title 元素
                }
            let icpbeianObj = result.data.find(item => item.key_name === 'ICP_beian');
                if (icpbeianObj) {
                    $('#ICP_beian').text(icpbeianObj.value_name); // 更新页面的 ICP_beian 元素
                }
            let yearObj = result.data.find(item => item.key_name === 'Year');
                if (yearObj) {
                    $('#yearday').text(yearObj.value_name); // 更新页面的 "Year 元素
                }
            let Domain_NameObj = result.data.find(item => item.key_name === 'Domain_Name');
                if (Domain_NameObj) {
                    $('#Domain_Name').text(Domain_NameObj.value_name); // 更新页面的 "Domain_Name 元素
                }
            let Domain_AddressObj = result.data.find(item => item.key_name === 'Domain_Address');
                if (Domain_AddressObj) {
                    $('#Domain_Address').attr('href', Domain_AddressObj.value_name); // 更新页面的 href 属性
                }
            let icon_hrefObj = result.data.find(item => item.key_name === 'icon_href');
                if (icon_hrefObj) {
                    $('#icon_href').attr('href', icon_hrefObj.value_name); // 更新页面的 href 属性
                }
            let backgroundObj = result.data.find(item => item.key_name === 'background');
                if (backgroundObj) {
                    $('#background').attr('background', backgroundObj.value_name); // 更新页面的 href 属性
                }
            let logo_srcObj = result.data.find(item => item.key_name === 'logo_src');
                if (logo_srcObj) {
                    $('#logo_src').attr('src', logo_srcObj.value_name); // 更新页面的 src 属性
                    $('#logo_img').attr('src', logo_srcObj.value_name); // 更新页面的 src 属性
                }
            let logo_remarkObj = result.data.find(item => item.key_name === 'logo_remark');
                if (logo_remarkObj) {
                    $('#logo_remark').text(logo_remarkObj.value_name); // 更新页面的 text属性
                }
            let QR_code_NameObj = result.data.find(item => item.key_name === 'QR_code_Name');
                if (QR_code_NameObj) {
                    $('#QR_code_Name').text(QR_code_NameObj.value_name); // 更新页面的 text属性
                }
            let QR_code_hrefObj = result.data.find(item => item.key_name === 'QR_code_src');
                if (QR_code_hrefObj) {
                    $('#QR_code_src').attr('src', QR_code_hrefObj.value_name); // 更新页面的 src 属性
                }
            let aboutlinksObj = result.data.find(item => item.key_name === 'aboutlinks');
                if (aboutlinksObj) {
                    $('#aboutlinks').html(aboutlinksObj.value_name); // 更新页面的 text属性
                }
            
            layer.msg(result.msg, { icon: 1, time: 2000 });
        } 
        // else {
        //     layer.msg(result.msg, { icon: 2, time: 6000 });
        // }
        },
        error: function (xhr, status, error) {
            layer.close(loading);
            layer.msg('请求失败，请稍后重试', { icon: 2, time: 6000 });
        }
    });
    return false; //阻止表单的默认提交行为。
});
</script>

<script>
    window.onload = function() {
        layui.use(['form', 'jquery'], function () {
            let $ = layui.jquery;
            let form = layui.form;
            let MODULE_PATH = "{{ url_for('system.access.main') }}";
            let username = $('#user_name').text();
            let referrer = document.referrer || '直接访问';
            let userAgent = navigator.userAgent || '未知';
            let flowtotal = 0;
            // 获取浏览器传输数据
            flowtotal += window.performance.getEntriesByType("resource").reduce((total, entry) => {
                return total + entry.transferSize;
            }, 0);
            
            // console.log(flowtotal);
            
            $.ajax({
                url: MODULE_PATH + 'save',
                contentType: 'application/json',
                data: JSON.stringify({
                    projectname: 'AccessRecords',
                    user_id: username,
                    url: window.location.href,
                    referer: referrer,
                    flowtotal: flowtotal,
                    userAgent: userAgent
                }),
                dataType: 'json',
                type: 'POST',
                // success: function (res) {
                //     console.log(res);
                // }
            });
        });
    };
</script>
<script>
    if (window !== top) {
        top.location.href = location.href;
    }
</script>
</body>